<template>
    <div id="payRuleList">
        <el-card>
            <el-container>
                <div style="padding: 20px">
                    <span>车库选择：</span>
                    <el-select :value="pageSearch.clauses[0].value"
                               v-model="pageSearch.clauses[0].value"
                                @change="search"
                                :clearable="true">
                        <el-option  v-for="item in parkingOption"
                                    :key="item.id"
                                    :label="item.parkingName"
                                    :value="item.id"
                        ></el-option>
                    </el-select>
                    <span style="margin-left: 20px">收费类型：</span>
                    <el-select  :value="pageSearch.clauses[1].value"
                                v-model="pageSearch.clauses[1].value"
                                @change="search"
                                :clearable="true">
                        <el-option  v-for="item in payRuleClassOption"
                                    :key="item.id"
                                    :label="item.ruleClassDesc"
                                    :value="item.id"
                        ></el-option>
                    </el-select>
                </div>
                <div style="padding: 20px 20px 0 20px;">
                    <el-button type="primary" size="mini" icon="el-icon-plus" @click="addPayRules">新增</el-button>
                    <el-button type="success" size="mini" icon="el-icon-edit-outline" @click="modifyPayRules">修改</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-close" @click="deletePayRules">批量删除</el-button>
                </div>
                <div style="padding: 0 20px 0 20px">
                    <el-table
                            ref="elxEditable"
                            :data="payRuleData"
                            height="530"
                            @selection-change="handleSelectionChange"
                            :header-cell-style="tableHeader"
                    >
                        <el-table-column
                           type="selection"
                           width="50px"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="parkingName"
                                label="所属车库"
                                :show-overflow-tooltip="true"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                prop="ruleClassDesc"
                                label="类型"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="timeStart"
                                label="时段开始"
                                width="150"
                                :formatter="dateFormat"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="timeEnd"
                                label="时段结束"
                                width="150"
                                :formatter="dateFormat"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="money1"
                                label="(时段/大型车/常规)价格/元"
                                width="200"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="money2"
                                label="(其他时段/小型车)价格/元"
                                width="200"
                                :edit-render="{name:'ElInputNumber'}"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="payRule"
                                label="收费规则简述"
                                :show-overflow-tooltip="true"
                                :edit-render="{name:'ElInput'}"
                        >
                        </el-table-column>
                    </el-table>
                </div>
                <el-footer height="35px">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="pageSearch.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </el-footer>
                <el-dialog
                        :title="title"
                        :visible.sync="isVisible"
                        :close-on-click-modal="false"
                        @close="clearModel"
                >
                    <el-form v-if="!payRuleModel.id" label-width="10%">
                        <el-form-item>
                            <span>车库选择：</span>
                            <el-select  v-model="payRuleModel.parkingId"
                                        @change="search"
                                        :clearable="true">
                                <el-option  v-for="item in parkingOption"
                                            :key="item.id"
                                            :label="item.parkingName"
                                            :value="item.id"
                                ></el-option>
                            </el-select>
                            <span style="margin-left: 20px">收费类型：</span>
                            <el-select  v-model="payRuleModel.parentId"
                                        @change="clearProperty"
                                        :clearable="true">
                                <el-option  v-for="item in payRuleClassOption"
                                            :key="item.id"
                                            :label="item.ruleClassDesc"
                                            :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-form v-if="payRuleModel.parentId===1" label-width="10%">
                        <el-form-item >
                            <span >开始时段：</span>
                            <el-time-picker v-model="payRuleModel.timeStart" >
                            </el-time-picker>
                            <span style="margin-left: 40px">结束时段：</span>
                            <el-time-picker v-model="payRuleModel.timeEnd" >
                            </el-time-picker>
                        </el-form-item>
                        <el-form-item >
                            <span >该时段收费：</span>
                            <el-input-number v-model="payRuleModel.money1"  :min="0"  ></el-input-number>
                            <span style="margin-left: 5px">元/时</span>
                            <span style="margin-left: 80px">其他时段收费：</span>
                            <el-input-number v-model="payRuleModel.money2"  :min="0"  ></el-input-number>
                            <span style="margin-left: 5px">元/时</span>
                        </el-form-item>
                        <el-form-item >
                            <span >收费描述：</span>
                            <el-input v-model="payRuleModel.payRule" style="width: 60%"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form v-if="payRuleModel.parentId===2" label-width="10%">
                        <el-form-item >
                            <span >大型车：</span>
                            <el-input-number v-model="payRuleModel.money1"  :min="0"  ></el-input-number>
                            <span style="margin-left: 5px">元/时</span>
                            <span style="margin-left: 40px">小型车：</span>
                            <el-input-number v-model="payRuleModel.money2"  :min="0"  ></el-input-number>
                            <span style="margin-left: 5px">元/时</span>
                        </el-form-item>
                        <el-form-item >
                            <span >收费描述：</span>
                            <el-input v-model="payRuleModel.payRule" style="width: 60%"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form v-if="payRuleModel.parentId===3" label-width="10%">
                        <el-form-item >
                            <span >收费价格：</span>
                            <el-input-number v-model="payRuleModel.money1"  :min="0"  ></el-input-number>
                            <span style="margin-left: 5px">元/时</span>
                        </el-form-item>
                        <el-form-item >
                            <span >收费描述：</span>
                            <el-input v-model="payRuleModel.payRule" style="width: 60%"></el-input>
                        </el-form-item>
                    </el-form>
                    <div v-if="payRuleModel.parentId" style="text-align: center">
                        <el-button  type="primary" @click="save">保存</el-button>
                    </div>

                </el-dialog>
            </el-container>
        </el-card>
    </div>
</template>

<script>
    import Message from '../../components/messages/index'
    export default {
        name:"payRuleList",
        data(){
            return{
                tableHeader:{
                    "background-color":"#DCDFE6",
                    "font-size":"15px"
                },
                isVisible:false,
                title:"",
                payRuleData:[],
                payRuleModel:{
                },
                payRuleModelNull:{
                    id:null,
                    timeStart:null,
                    timeEnd:null,
                    money1:null,
                    money2:null,
                    parentId:null,
                    parkingId:null,
                    payRule:"",
                },
                parkingOption:[],
                parkingIdOfUser:[],
                payRuleClassOption:[],
                total:null,
                pageSearch: {
                    pageSize: 10,
                    pageNum: 1,
                    clauses: [{
                        column: "parkingId",
                        operation: "=",
                        value: null,
                    }, {
                        column: "parentId",
                        operation: "=",
                        value: null,
                    },{
                        column: "parentId",
                        operation: "isNotNull",
                        value: null,
                    },{
                        column: "parkingId",
                        operation: "in",
                        value: null,
                    }],
                    sortMap:{
                        createDatetime:"DESC"
                    }
                },
                multipleSelection: []
            }
        },
        methods:{
            save(){
                switch (this.payRuleModel.parentId) {
                    case 1:
                        if(!this.payRuleModel.money1||!this.payRuleModel.money2||!this.payRuleModel.timeStart||!this.payRuleModel.timeEnd||!this.payRuleModel.payRule){
                            Message.warning("请完善数据！");
                            return;
                        }
                        break;
                    case 2:
                        if(!this.payRuleModel.money1||!this.payRuleModel.money2||!this.payRuleModel.payRule){
                            Message.warning("请完善数据！");
                            return;
                        }
                        break;
                    case 3:
                        if(!this.payRuleModel.money1||!this.payRuleModel.payRule){
                            Message.warning("请完善数据！");
                            return;
                        }
                        break;
                }
              if(this.payRuleModel.id==null){
                  if(this.payRuleModel.parkingId==null){
                      Message.warning("请完善数据！");
                      return;
                  }else{
                      this.$http.post("payRules/add",this.payRuleModel).then((res)=>{
                          if(res.status===200){
                              Message.success("新增成功！")
                              this.search();
                              this.clearModel();
                          }
                      })
                  }
              }else{
                  this.$http.post("payRules/update",this.payRuleModel).then((res)=>{
                      if(res.status===200){
                          Message.success("修改成功!");
                          this.search();
                          this.clearModel();
                      }
                  })
              }
              this.isVisible=false;
            },
            clearModel(){
              this.payRuleModel=this.payRuleModelNull;
            },
            clearProperty(){
                this.payRuleModel.payRule="";
                this.payRuleModel.money1=null;
                this.payRuleModel.money2=null;
                this.payRuleModel.timeStart=null;
                this.payRuleModel.timeEnd=null;
            },
            addPayRules(){
                this.title="新增收费规则";
                this.clearModel();
                this.isVisible=true;
            },
            modifyPayRules(){
                if(this.multipleSelection.length===0){
                    Message.warning("请选择一条数据")
                }else{
                    this.payRuleModel=this.multipleSelection[0];
                    console.log(this.payRuleModel);
                    this.title="修改收费规则";
                    this.isVisible=true;
                }
            },
            deletePayRules(){
                if(this.multipleSelection.length===0){
                    Message.warning("请选择至少一条数据！");
                }else{
                    Message.confirm2("确认删除所选数据？","warning").then(()=>{
                        this.$http.post("payRules/deletePayRuleList",this.multipleSelection).then((res)=>{
                            if(res.status===200){
                                Message.success("成功删除【"+res.data+"】条数据！");
                                this.search();
                            }
                        })
                    })
                }
            },
            handleSelectionChange(val){
                this.multipleSelection = val;
            },
            handleSizeChange(val){
                this.pageSearch.pageSize=val;
                this.getPayRuleList();
            },
            handleCurrentChange(val){
                this.pageSearch.pageNum=val;
                this.getPayRuleList();
            },
            dateFormat(row,column){
                let date=row[column.property];
                if (date === undefined ||date==null) {
                    return "";
                }
                return this.$moment(date).format("HH:mm:ss");
            },
            search(){
                this.pageSearch.pageNum=1;
                this.pageSearch.pageSize=10;
                this.getPayRuleList();
            },
            getPayRuleList(){
                this.$http.post("payRules/page",this.pageSearch).then((res)=>{
                    if(res.status===200){
                        this.payRuleData=res.data.list;
                        this.total=res.data.total;
                        for(let i=0;i<this.payRuleData.length;i++){
                            for(let j=0;j<this.payRuleClassOption.length;j++){
                                if(this.payRuleClassOption[j]["id"]===this.payRuleData[i]["parentId"]){
                                    this.payRuleData[i].ruleClassDesc=this.payRuleClassOption[j]["ruleClassDesc"];
                                }
                            }
                            for(let j=0;j<this.parkingOption.length;j++){
                                if(this.parkingOption[j]["id"]===this.payRuleData[i]["parkingId"]){
                                    this.payRuleData[i].parkingName=this.parkingOption[j]["parkingName"];
                                }
                            }

                        }
                    }
                })
            },
            init(){
                let userId = JSON.parse(localStorage.getItem('user'));
                if(userId.roleId===2){//如果为车库管理员
                    this.$http.get("/parking/getParkingOfUser/"+userId.id).then((res)=>{
                        if(res.status===200){
                            this.parkingOption=res.data;
                            for(let i=0;i<res.data.length;i++){
                                this.parkingIdOfUser.push(res.data[i].id);
                            }
                            this.pageSearch.clauses[3].value=this.parkingIdOfUser;
                            this.getPayRuleList();
                        }
                    })
                }else if(userId.roleId===1){//如果为总管理员
                    this.$http.get("parking/getParkingListNameAndId").then((res)=>{
                        if(res.status===200){
                            this.parkingOption=res.data;
                            this.getPayRuleList();
                        }
                    });
                }
                this.$http.get("payRules/getRuleClassList").then((res)=>{
                    if(res.status===200){
                        this.payRuleClassOption=res.data;
                    }
                });

            }
        },
        mounted() {
            this.init()
        }
    }
</script>

<style scoped lang="less">
    #payRuleList{
        color: #606266;
        height: calc(~'100vh - 100px');
        width: 100%;
    }
    .list{


        color: #606266
    }
</style>